<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 面向过程和面向对象

    // 面向过程
    // 就是分析出解决问题所需要的步骤，然后用变量,函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了。
    //  经典案例 :
    // (1) 购物车  (1. 获取元素 2. 加号事件 3.减号事件 4.全选/反选 5.单删和全删 6.合计)
    // (2) 元素拖拽(1. 获取元素 2. 当鼠标按下，确定按下的位置 3.鼠标在文档移动时,盒子跟随移动 4.鼠标抬起，停止移动)

    // 面向对象:
    //  思想上提升 , 就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与行为(方法)--这个对象就称之为类(面向对象)

    // 面向对象的三大特性: 封装 继承 多态



    // 把大象放进冰箱中需要几步
    //  (1)  面向过程 (分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现)
    //   1.1  需要的事物  大象(elephant)  冰箱(icebox)
    //   1.2  打开冰箱  open()
    //   1.3  把大象放进冰箱中  put()
    //   1.4  关上冰箱   close()

    //  (2)   面向对象   就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与行为(方法)

    var icebox = {
        target: "大象", // 鸡蛋 土豆 
        open: function () { },
        put: function (target) { },
        close: function () { },
    }

    elephant = {

    }

    // 最简单的面向对象 (字面量对象)  => 把面向过程中的变量,函数 整合到对象中 作为对象的属性和方法





</script>

</html>